<template>
  <div>
    <!-- 添加章节按钮 -->
    <div>
      <el-button icon="el-icon-plus" type="primary" size="medium" style="width:100%;height: 50px" @click="addChapter">添加章节</el-button>
    </div>

    <!-- 章节列表 -->
    <ul class="chapterList">
      <li
        v-for="chapter in chapterNestedList"
        :key="chapter.chapterId">
        <p>
          {{ chapter.name }}
          <span class="acts">
            <el-tag>章节排序： {{chapter.sort}}</el-tag>
            <el-button icon="el-icon-plus" type="primary" size="medium" @click="addVideo(chapter.chapterId)">添加视频课时</el-button>
            <el-button icon="el-icon-plus" type="primary" size="medium" @click="addFile(chapter.chapterId)">添加文档课时</el-button>
            <el-button icon="el-icon-edit-outline" type="success" size="medium" @click="editChapter(chapter.chapterId)">修改</el-button>
            <el-button icon="el-icon-delete" type="danger" size="medium" @click="deleteChapter(chapter.chapterId)">删除</el-button>
          </span>
        </p>
        <!-- 课时 -->
        <ul class="chapterList videoList">
          <li
            v-for="period in chapter.children"
            :key="period.periodId">
            <p>
              {{ period.periodName }}
              <span class="acts">
                <el-tag effect="plain" v-if="period.free" type="danger">{{ '免费观看' }}</el-tag>
                <el-tag effect="plain" v-else >{{ '收费观看' }}</el-tag>

                <el-tag effect="plain" v-if="period.video">{{ '视频课时' }}</el-tag>
                <el-tag effect="plain" v-else-if="period.doc">{{ '文档课时' }}</el-tag>

                <el-button icon="el-icon-edit-outline" type="success" size="medium" @click="editPeriod(chapter,period)">修改</el-button>
                <el-button icon="el-icon-delete" type="danger" size="medium" @click="deletePeriod(period.periodId)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>


    <!--章节表单dialog-->
    <ChapterForm
      ref="chapterForm"
      :course-id="courseId"
      @onSaveSuccess="refreshList"/>

    <!--视频课时表单dialog-->
    <VideoForm
      ref="videoForm"
      :is-free="courseIsFree"
      :course-id="courseId"
      @onSaveSuccess="refreshList" />

    <!--文档课时表单dialog-->
    <FileForm
      ref="fileForm"
      :is-free="courseIsFree"
      :course-id="courseId"
      @onSaveSuccess="refreshList" />


  </div>
</template>

<script>
  import { getNestedList, deleteChapterById } from '@/api/chapter'
  import { deletePeriodById } from '@/api/period'
  import { getCoursePublishById } from '@/api/course'
  import ChapterForm from '@/views/course/components/ChapterForm'
  import VideoForm from '@/views/course/components/VideoForm'
  import FileForm from '@/views/course/components/FileForm'


  export default {
    // 父组件向子组件传值
    props: {
      courseId: {
        type: String,
        default: null
      }
    },

    components:{
      VideoForm,
      ChapterForm,
      FileForm
    },

    data() {
      return {
        courseIsFree: '', //课程是否收费
        chapterNestedList: [] // 章节嵌套列表
      }
    },

    created() {
      this.fetchChapterNestedListByCourseId()
      this.getCourseInfo()
    },

    methods: {
      deletePeriod(periodId){
        this.$confirm('此操作将永久删除该记录, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return deletePeriodById(periodId)
        }).then(result => {
          if (result.code === 20000){
            this.fetchChapterNestedListByCourseId() // 刷新列表
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          }
        }).catch((result) => { // 失败
          if (result === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除！'
            })
          }
        })
      },

      editPeriod(chapter,period){
        if (period.video === 1){
          this.$refs.videoForm.open(chapter.chapterId, period.periodId)
        }
        if (period.doc === 1){
          this.$refs.fileForm.open(chapter.chapterId, period.periodId)
        }
      },

      addChapter() {
        this.$refs.chapterForm.open()
      },

      addVideo(chapterId){
        this.$refs.videoForm.open(chapterId)
      },

      addFile(chapterId) {
        this.$refs.fileForm.open(chapterId)
      },

      editChapter(chapterId) {
        this.$refs.chapterForm.open(chapterId)
      },

      refreshList() {
        this.fetchChapterNestedListByCourseId()
      },

      fetchChapterNestedListByCourseId() {
        getNestedList(this.courseId).then(result => {
          this.chapterNestedList = result.data.items
          //console.log(this.chapterNestedList)
        })
      },

      getCourseInfo(){
        getCoursePublishById(this.courseId).then(result => {
          let { code,data } = result
          if (code === 20000){
            if (data.item.price !== 0){
              this.courseIsFree = false
            }
            else {
              this.courseIsFree = true
            }
          }
        })
      },

      deleteChapter(chapterId){
        this.$confirm('此操作将永久删除该章节，包括该章节下的所有课时, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return deleteChapterById(chapterId)
        }).then(() => {
          this.fetchChapterNestedListByCourseId() // 刷新列表
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
        }).catch((result) => {
          if (result === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除！'
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .chapterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .chapterList li{
    position: relative;
  }
  .chapterList p{
    float: left;
    font-size: 18px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }
  .chapterList .acts {
    float: right;
    font-size: 14px;
  }

  .videoList .acts{
    float: right;
    font-size: 14px;
    line-height: 10px;
  }

  .videoList{
    padding-left: 50px;
  }
  .videoList p{
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 55px;
    line-height: 35px;
    width: 100%;
    border: 1px dashed #DDD;
  }
  .el-tag{
    height: 36px;
    line-height: 35px;
    margin-right: 10px;
    display: inline-block;
    font-size: 12px;
  }
</style>
